<template>
	<view class="content">
    <!-- navbarr -->
    <view class="navbar">
      <u-navbar 
        back-icon-color="white" 
        :title="type == 1 ? `购买${tokenType}` : `出售${tokenType}`" 
        title-color="white"
        :border-bottom="false"
        :background="{'background': 'linear-gradient(to right, #15295b, #213e8a)'}"></u-navbar>
    </view>
    <!-- container -->
    <view class="count-down">
      <view class="count-price">
        <template v-if="isRepresen">
          <text class="text">交易申诉中</text>
        </template>
        <template v-else>
          <template v-if="type == 1">
            <template v-if="step == 1">
              <text class="text">￥{{ amount }}</text>
              <view class="copy-box" @click="onCopy(amount)">
                <image src="../../static/icon/icon-copy.png" mode="aspectFit" class="icon"></image>
              </view>
            </template>
            <template v-else-if="step == 2">
              <text class="text">等待卖家放币</text>
            </template>
            <template v-else-if="step == 3">
              <text class="text">交易已完成</text>
            </template>
            <template v-else-if="step == 0">
              <text class="text">交易已取消</text>
            </template>
          </template>
          <template v-else>
            <template v-if="step == 1">
              <text class="text">等待买家支付</text>
            </template>
            <template v-else-if="step == 2">
              <text class="text">买家已付款</text>
            </template>
            <template v-else-if="step == 3">
              <text class="text">交易已完成</text>
            </template>
            <template v-else-if="step == 0">
              <text class="text">交易已取消</text>
            </template>
          </template>
        </template>
      </view>
      <view class="count-time" v-if="!isRepresen">
        <template v-if="type == 1">
          <template v-if="step == 1">
            <text class="text">请在</text>
            <text class="text-count">{{ needtime }}</text>
            <text class="text">前付款给卖家</text>
          </template>
          <template v-else-if="step == 2">
            <text class="text">预计</text>
            <text class="text-count">{{ uninvest.needtime }}</text>
            <text class="text">前支付</text>
          </template>
          <template v-else-if="step == 3">
            <text class="text-count">存在争议，可向客服投诉</text>
          </template>
        </template>
        <template v-else>
          <template v-if="step == 1">
            <text class="text">预计</text>
            <text class="text-count">{{ uninvest.needtime }}</text>
            <text class="text">前收到资产</text>
          </template>
          <template v-else-if="step == 2">
            <text class="text-count">存在争议，可向客服投诉</text>
          </template>
          <template v-else-if="step == 3">
            <text class="text-count">存在争议，可向客服投诉</text>
          </template>
        </template>
      </view>
      <view class="cuinbtn-box" v-if="!isRepresen">
        <template v-if="type == 1">
          <template v-if="step == 1">
            <view class="btnitem" @click="onCall(sellInfo.mobile)">
              <view class="btnitem-icon">
                <u-icon name="chat" size="38" color="#fff"></u-icon>
              </view>
              <text>联系卖家</text>
            </view>
          </template>
          <template v-else-if="step == 2">
            <view class="btnitem" @click="onCall(sellInfo.mobile)">
              <view class="btnitem-icon">
                <u-icon name="phone" size="38" color="#fff"></u-icon>
              </view>
              <text>致电卖家</text>
            </view>
            <!-- <view class="btnitem">
              <view class="btnitem-icon">
                <u-icon name="chat" size="38" color="#fff"></u-icon>
                <u-badge :is-dot="true" type="error" :offset="[14, 50]"></u-badge>
              </view>
              <text>联系卖家</text>
            </view> -->
          </template>
          <template v-else-if="step == 3">
            <view class="btnitem">
              <view class="btnitem-icon">
                <u-icon name="man-add" size="38" color="#fff"></u-icon>
              </view>
              <text>收藏商家</text>
            </view>
            <view class="btnitem">
              <view class="btnitem-icon">
                <u-icon name="man-delete" size="38" color="#fff"></u-icon>
              </view>
              <text>拉黑对方</text>
            </view>
          </template>
        </template>
        <template v-else>
          <template v-if="step == 1">
            <view class="btnitem" @click="onCall(sellInfo.mobile)">
              <view class="btnitem-icon">
                <u-icon name="phone" size="38" color="#fff"></u-icon>
              </view>
              <text>致电买家</text>
            </view>
           <!-- <view class="btnitem">
              <view class="btnitem-icon">
                <u-icon name="chat" size="38" color="#fff"></u-icon>
                <u-badge :is-dot="true" type="error" :offset="[14, 50]"></u-badge>
              </view>
              <text>联系买家</text>
            </view> -->
          </template>
          <template v-else-if="step == 2">
            <view class="btnitem">
              <view class="btnitem-icon">
                <u-icon name="man-delete" size="38" color="#fff"></u-icon>
              </view>
              <text>拉黑对方</text>
            </view>
          </template>
        </template>
      </view>
    </view>
    <view class="setinfo">
      <template v-if="step == 1 && sePayInfo[payMent]">
        <view class="set-title">
          <view class="set-left">
            <image :src="`../../static/icon/pay-1.png`" mode="aspectFit" class="icon"></image>
            <text class="text">{{ sePayInfo[payMent].type }}</text>
          </view>
          <view class="set-right" v-if="type == 1" @click="showPayMethod = true">
            <text class="text">切换支付方式</text>
            <u-icon name="arrow-right" size="28" color="#999"></u-icon>
          </view>
        </view>
        <view class="set-cell-info">
          <u-cell-group :border="false">
            <u-cell-item 
              :border-bottom="false"
              title="收款姓名" 
              :value="sePayInfo[payMent].name" 
              :arrow="false" 
              :value-style="{'color': '#cdd4e7'}"
              :title-style="{'color': '#7788a2', 'font-size': '28rpx'}"
              hover-class="none" 
              @click="onCopy('姓名')">
              <view slot="right-icon" class="icon-copy-box">
                <image src="../../static/icon/icon-copy-gray.png" mode="aspectFit" class="icon"></image>
              </view>
            </u-cell-item>
            <u-cell-item 
              :border-bottom="false" 
              title="收款帐号" 
              :value="sePayInfo[payMent].accounts" 
              :arrow="false" 
              :value-style="{'color': '#cdd4e7'}" 
              :title-style="{'color': '#7788a2', 'font-size': '28rpx'}"
              hover-class="none" 
              @click="onCopy(sePayInfo[payMent].accounts)">
              <view slot="right-icon" class="icon-copy-box">
                <image src="../../static/icon/icon-copy-gray.png" mode="aspectFit" class="icon"></image>
              </view>
            </u-cell-item>
            <template v-if="false">
              <u-cell-item 
                :border-bottom="false" 
                title="银行信息" 
                value="青岛银行" 
                :arrow="false" 
                :value-style="{'color': '#cdd4e7'}" 
                :title-style="{'color': '#7788a2', 'font-size': '28rpx'}"
                hover-class="none" 
                @click="onCopy('青岛银行')">
                <view slot="right-icon" class="icon-copy-box">
                  <image src="../../static/icon/icon-copy-gray.png" mode="aspectFit" class="icon"></image>
                </view>
              </u-cell-item>
              <u-cell-item 
                :border-bottom="false" 
                title="" 
                value="青岛银行" 
                :arrow="false" 
                :value-style="{'color': '#cdd4e7'}" 
                :title-style="{'color': '#7788a2', 'font-size': '28rpx'}"
                hover-class="none" 
                @click="onCopy('青岛银行')">
                <view slot="right-icon" class="icon-copy-box">
                  <image src="../../static/icon/icon-copy-gray.png" mode="aspectFit" class="icon"></image>
                </view>
              </u-cell-item>
            </template>
          </u-cell-group>
        </view>
        <!-- <view class="vchat-image" v-if="type == 1">
          <image src="../../static/images/loginIcon/verify.png" mode="aspectFill" class="image"></image>
        </view> -->
        <view class="show-tips" v-if="!isRepresen">
          <u-alert-tips type="info" 
            :description="
            type == 1 ? '平台不会自动扣款。如您已向卖家线下转账付款,请务必点击下方“已付款,请放币”按钮,否则有可能造成您的资金损失。' 
            : '平台不会自动扣款。如买家线下已经转账付款,请务必点击下方“放币”按钮。'
            " 
            :show-icon="true"></u-alert-tips>
        </view>
      </template>
      <template v-else-if="step == 2 || step == 3 || step == 0">
        <view class="set-cell-info">
          <u-cell-group :border="false">
            <u-cell-item 
              :border-bottom="false"
              title="交易总额" 
              :value="`￥${uninvest.ofdMoney}`"
              :arrow="false" 
              :value-style="{'color': '#ffa121'}"
              :title-style="{'color': '#7788a2', 'font-size': '28rpx'}"
              hover-class="none" >
            </u-cell-item>
            <u-cell-item 
              :border-bottom="false" 
              title="交易数量" 
              :value="`${uninvest.ofdJiner} USDT`" 
              :arrow="false" 
              :value-style="{'color': '#cdd4e7'}" 
              :title-style="{'color': '#7788a2', 'font-size': '28rpx'}"
              hover-class="none" >
            </u-cell-item>
            <u-cell-item 
              :border-bottom="false" 
              title="交易单价" 
              :value="`￥${uninvest.ofdAMoney}`" 
              :arrow="false" 
              :value-style="{'color': '#cdd4e7'}" 
              :title-style="{'color': '#7788a2', 'font-size': '28rpx'}"
              hover-class="none" >
            </u-cell-item>
            <u-cell-item 
              :border-bottom="false" 
              title="下单时间" 
              :value="uninvest.ofdStateDate" 
              :arrow="false" 
              :value-style="{'color': '#cdd4e7'}" 
              :title-style="{'color': '#7788a2', 'font-size': '28rpx'}"
              hover-class="none" >
            </u-cell-item>
            <!-- <u-cell-item 
              :border-bottom="false" 
              title="订单编号" 
              value="20201648948941" 
              :arrow="false" 
              :value-style="{'color': '#cdd4e7'}" 
              :title-style="{'color': '#7788a2', 'font-size': '28rpx'}"
              hover-class="none" 
              @click="onCopy('20201648948941')">
              <view slot="right-icon" class="icon-copy-box">
                <image src="../../static/icon/icon-copy-gray.png" mode="aspectFit" class="icon"></image>
              </view>
            </u-cell-item> -->
          </u-cell-group>
        </view>
        <view class="show-tips" v-if="step == 2">
          <u-alert-tips type="info" description="倒计时结束后对方仍未放币,系统将相应资产划转到您的账户。" :show-icon="true"></u-alert-tips>
        </view>
      </template>
    </view>
    <view class="ex-tipsinfo" v-if="type == 1 && step == 1">
      <text class="ex-strong">交易提醒</text>
      <view class="ex-list-item">
        <text><text class="warning">请勿备注任何信息</text>BTC、ETH、USDT以及其他数字资产名称于转账备注，防止造成您的汇款被拦截，银行卡被冻结等问题。</text>
      </view>
      <view class="ex-list-item">
        <text>非工作时间<text class="warning">(节假日及工作日的17:00-8:00)</text>大于5w以上的跨行汇款，请分批支付<text class="warning">(少于5w可及时到账)</text></text>
      </view>
      <view class="ex-list-item">
        <text>请使用即时到账的支付方式，支付宝转银行卡，2小时汇款等支付方式造成1小时内未到账订单，卖家有权退回款项并取消订单。</text>
      </view>
    </view>
    <view class="p-cell-group" v-if="step != 0">
      <template v-if="step == 1">
        <view class="p-cell">
          <text class="text">交易明细</text>
        </view>
        <view class="p-cell">
          <text class="text">交易单价</text>
          <view class="p-cell-right">
            <text class="pr-text">￥{{ uninvest.ofdAMoney }}</text>
          </view>
        </view>
        <view class="p-cell">
          <text class="text">交易数量</text>
          <view class="p-cell-right">
            <text class="pr-text">{{ uninvest.ofdJiner }}USDT</text>
          </view>
        </view>
        <!-- <view class="p-cell">
          <text class="text">订单编号</text>
          <view class="p-cell-right">
            <text class="pr-text">202007102256874</text>
          </view>
        </view> -->
        <view class="p-cell">
          <text class="text">卖家昵称</text>
          <view class="p-cell-right">
            <text class="pr-text">{{ sellInfo.user_name }}</text>
            <image src="../../static/icon/icon-v.png" mode="aspectFit" class="imageicon"></image>
          </view>
        </view>
      </template>
      <template v-else-if="step == 2 || step == 3">
        <view class="p-cell">
          <text class="text">交易明细</text>
        </view>
        <view class="p-cell" v-if="sePayInfo[payMent]">
          <text class="text">支付方式</text>
          <view class="p-cell-right">
            <text class="pr-text">{{ sePayInfo[payMent].type }}
              <text class="small">({{ sePayInfo[payMent].accounts }})</text>
            </text>
          </view>
        </view>
        <view class="p-cell" v-if="step == 3">
          <text class="text">支付金额</text>
          <view class="p-cell-right">
            <text class="pr-text">￥{{ amount }}</text>
          </view>
        </view>
        <view class="p-cell" v-if="sePayInfo[payMent]">
          <text class="text">收款姓名</text>
          <view class="p-cell-right">
            <text class="pr-text">{{ sePayInfo[payMent].name }}</text>
          </view>
        </view>
        <view class="p-cell">
          <text class="text">支付时间</text>
          <view class="p-cell-right">
            <text class="pr-text">{{ uninvest.ofdPayDate }}</text>
          </view>
        </view>
        <view class="p-cell">
          <text class="text">卖家昵称</text>
          <view class="p-cell-right">
            <text class="pr-text">{{ sellInfo.user_name }}</text>
            <image src="../../static/icon/icon-v.png" mode="aspectFit" class="imageicon"></image>
          </view>
        </view>
      </template>
    </view>
    <!-- footer -->
    <view class="footer-oper" v-if="!isRepresen">
      <template v-if="type == 1">
        <view class="fot-oper-box" v-if="step == 1">
          <view class="btnoper">
            <u-button @click="onCancel">取消订单</u-button>
          </view>
          <view class="btnoper">
            <u-button type="primary" @click="onBuyNext">已付款,请放币</u-button>
          </view>
        </view>
        <view class="fot-oper-box" v-else-if="step == 2">
          <view class="btnoper">
            <u-button @click="onCancel">取消订单</u-button>
          </view>
          <view class="btnoper">
            <u-button :custom-style="{'font-size': '24rpx', 'padding': '0 10rpx'}" :disabled="Boolean(stepCount)" type="error" @click="onRepresen">向客服申诉{{ stepCount ? stepCount : '' }}</u-button>
          </view>
          <!-- <view class="btnoper">
            <u-button :custom-style="{'font-size': '24rpx', 'padding': '0 10rpx'}" :disabled="Boolean(stepCount)" type="primary">催放币{{ stepCount ? stepCount : '' }}</u-button>
          </view> -->
        </view>
        <view class="fot-oper-box" v-else-if="step == 3">
          <view class="btnoper">
            <u-button @click="onRepresen">向客服申诉</u-button>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="fot-oper-box" v-if="step == 2">
          <view class="btnoper">
            <u-button type="primary" @click="showTips = true">放币</u-button>
          </view>
        </view>
        <view class="fot-oper-box" v-else-if="step == 3">
          <view class="btnoper">
            <u-button @click="onRepresen">向客服申诉</u-button>
          </view>
        </view>
      </template> 
    </view>
    <!--支付方式选择-->
    <u-popup v-model="showPayMethod" mode="right" length="75%" v-if="type == 1">
      <view class="payment-box">
        <text class="t1">请选择支付方式</text>
        <text class="t2">认证商家可使用非本人名下的收款方式</text>
        <u-radio-group v-model="payMent" @change="changePayMent">
          <view class="paylist-item" v-for="(item, index) in sePayInfo" :key="index">
            <u-radio reverse :name="index">
              <view class="payflex">
                <view class="p-icon">
                  <image :src="`/static/icon/pay-1.png`" mode="aspectFit" class="icon"></image>
                </view>
                <view class="p-info">
                  <text>{{ item.name }}</text>
                  <text class="small">{{ item.accounts }}({{ item.type }})</text>
                </view>
              </view>
            </u-radio>
          </view>
        </u-radio-group>
      </view>
    </u-popup>
    <!-- 提示 -->
    <u-modal v-model="showTips" :content="tipsContent" show-cancel-button @confirm="onNext"></u-modal>
  </view>
</template>

<script>
  import {
  	CUser
  } from '@/common/cache/user.js'
  var cache_user = new CUser();
	export default {
		data() {
			return {
        type: 0, // 0 购买， 1 出售
        step: 1, // 步骤 1、等待买家付款。 2、等待卖家放币。3、交易完成. 如果type是出售，则只有步骤1、2
        // type: 1, // 1 商家， 2 用户
        tokenType: 'USDT', // 当前交易币种类型
        id: 0, // 当前订单信息id
        status: 0, // 0-买家付款中,1-买家已付款
        amount: 0,
				countTime: '9\'59\"',
        stepCount: '5\'00\"',
        showPayMethod: false,
        payMent: 0,
        sePayInfo: [],
        paylist: [
          {
            label: 'bank',
            name: '账户名',
            cardDec: '青岛银行',
            cardLast: '1628'
          },
          {
            label: 'alipay',
            name: '支付宝名',
            cardDec: '9934***',
            cardLast: '4217'
          }
        ],
        showTips: false,
        needtime: '',
        tipsContent: '您确定已经收到货款了吗？',
        uninvest: {},
        sellInfo: {},
        isRepresen: false, // 是否申诉中
        nowTime: '',
        userInfo: {} ,// 当前用户信息
        getInfoTimer: null // 30秒一次刷新状态
      };
		},
    computed: {
      
    },
    onLoad (options) {
      this.type = options.type || 0
      this.step = options.step || 1
      this.tokenType = options.tokenType || ''
      this.status = options.status || 0
      this.amount = options.amount || 0
      this.id = options.id || 0
      this.getUserInfo()
      this.getInfo()
    },
    onHide() {
      clearInterval(this.timer)
      clearInterval(this.getInfoTimer)
    },
    onUnload () {
      clearInterval(this.timer)
      clearInterval(this.getInfoTimer)
    },
    methods: {
      getUserInfo () {
        cache_user.userinfo().then((res) => {
          this.userInfo = res
        })
      },
      onCall (phone) {
        uni.makePhoneCall({
          phoneNumber: phone,
          success: () => {
            
          },
          fail: () => {
            this.$api.msg('拨打失败')
          }
        })
      },
      // 申诉
      onRepresen () {
        uni.showLoading({
          mask: true
        })
        this.$api.http
        .get(`assistance/CurrencyTransaction/appealAction?id=${this.id}`)
        .then((res) => {
          uni.hideLoading()
          this.$api.msg(res.msg)
          if (res.status == 200) {
            this.isRepresen = true
          }
        })
      },
      // 当前订单信息
      getInfo (loading = true) {
        if (loading) {
          uni.showLoading({
            mask: true
          })
        }
        this.$api.http
        .get(`assistance/CurrencyTransaction/yesPayInvest?id=${this.id}`)
        .then((res) => {
          if (loading) uni.hideLoading();
          if (res.status == 200) {
            let data = res.data
            this.step = data.uninvest.ofdState + 1
            this.needtime = data.uninvest.needtime
            this.amount = data.uninvest.ofdMoney
            this.sePayInfo = data.accountsList || []
            this.uninvest = data.uninvest
            this.sellInfo = data.user
            this.type = data.uninvest.ofdType
            this.nowTime = data.nowtime
            if (this.step == 2) this.countStepTwo();
            if (data.uninvest.ofdMoneyPayInfo) {
              this.sePayInfo = []
              let _a = data.uninvest.ofdMoneyPayInfo.split('-')
              this.sePayInfo.push({
                type: _a[0],
                name: _a[1],
                accounts: _a[2]
              })
            }
            // 申诉中订单
            if (data.uninvest.ofdIsProblem) {
              this.isRepresen = true
            }
            if (this.userInfo.id == this.uninvest.ofdJiuyuanUid) {
              this.type = 1
            } else if (this.userInfo.id == this.uninvest.ofdUid) {
              this.type = 2
            }
            
            // if (this.type == 1) { // 买单
            // } else if (this.type == 2) { // 卖单
            //   if (this.userInfo.id == this.uninvest.ofdJiuyuanUid) {
            //     this.type = 2
            //   } else if (this.userInfo.id == this.uninvest.ofdUid) {
            //     this.type = 1
            //   }
            // }
          } else {
            this.$api.msg(res.msg)
          }
          clearInterval(this.getInfoTimer)
          this.getInfoTimer = setInterval(() => {
            console.log('刷新数据,获取当前状态')
            this.getInfo(false)
          }, 30000)
        })
      },
      // 取消订单
      onCancel () {
        uni.showModal({
          title: '提示',
          content: '是否确认取消订单?',
          success: (res) => {
            if (res.confirm) {
              uni.showLoading({
                mask: true
              })
              this.$api.http
              .post(`assistance/CurrencyTransaction/cancelInvestAction`, {
                id: this.id
              })
              .then((res) => {
                uni.hideLoading()
                this.$api.msg(res.msg)
                if (res.status == 200) {
                  uni.navigateBack({
                    delta: 2
                  })
                }
              })
            }
          },
          fail: () => {}
        })
      },
      // 已付款，请放币
      onBuyNext () {
        uni.showLoading({
          mask: true
        })
        this.$api.http
        .post(`assistance/CurrencyTransaction/yesPayInvestAction`, {
          id: this.id,
          accounts: this.sePayInfo[this.payMent].accounts
        })
        .then((res) => {
          uni.hideLoading()
          this.$api.msg(res.msg)
          if (res.status == 200) {
            this.step ++
            this.getInfo()
          }
        })
      },
      // 放币
      onNext () {
        uni.showLoading({
          mask: true
        })
        this.$api.http
        .post(`assistance/CurrencyTransaction/yesUnPayInvestAction`, {
          id: this.id
        })
        .then((res) => {
          uni.hideLoading()
          this.$api.msg(res.msg)
          if (res.status == 200) {
            this.step ++
          }
        })
      },
      /**
       * 选择支付方式
       */
      changePayMent (v) {
        console.log(v)
        this.showPayMethod = false
      },
      onCopy (val) {
        console.log('复制内容:' + val)
        // #ifdef APP-PLUS
        uni.setClipboardData({
          data: val,
          success: () => {
            uni.showToast({
              title: '复制成功',
              icon: 'none'
            })
          },
          fail: () => {
            uni.showToast({
              title: '复制失败',
              icon: 'none'
            })
          }
        })
        // #endif
      },
      /**
       * 倒计时
       */
      countStart () {
        let min = 9
        let sec = 59
        clearInterval(this.timer)
        this.timer = setInterval(() => {
          if (sec > 0) {
            sec--
            this.countTime = `${min}'${sec}"`
          } else {
            sec = 59
            if (min > 0) {
              min--
            } else {
              // 倒计时结束
              clearInterval(this.timer)
            }
          }
        }, 1000)
      },
      countStepTwo () {
        let oldTime = new Date(this.uninvest.ofdPayDate).getTime()
        let nowTime = new Date(this.nowTime).getTime()
        let min = 5
        let sec = 0
        let surplus = min * 60 * 1000
        if (nowTime - oldTime >= surplus) {
          min = 0
          sec = 0
        } else {
          surplus = (surplus - (nowTime - oldTime)) / 60 / 1000
          min = Math.floor(surplus)
          sec = parseInt((surplus - min) * 60)
        }
        clearInterval(this.timer)
        this.timer = setInterval(() => {
          if (sec > 0) {
            sec--
            this.stepCount = `${min}'${sec}"`
          } else {
            sec = 59
            if (min > 0) {
              min--
            } else {
              this.stepCount = false
              // 倒计时结束
              clearInterval(this.timer)
            }
          }
        }, 1000)
      }
    }
	}
</script>

<style lang="scss">
page {
  background-color: $bg-gap;
}
.count-down {
  position: relative;
  background: linear-gradient(to right, #15295b, #213e8a);
  padding: 20rpx 30rpx 100rpx;
  .count-price {
    font-size: 38rpx;
    color: #fff;
    .small {
      font-size: 24rpx;
      opacity: .6;
    }
  }
  .count-time {
    font-size: 24rpx;
    color: #fff;
    margin-top: 20rpx;
    display: flex;
    .text-count {
      color: #e4a138;
    }
    .pay-text {
      opacity: .7;
      margin-left: auto;
    }
  }
}
.setinfo {
  background-color: $bg-theme;
  box-shadow: 0 4rpx 20rpx rgba($color: #000000, $alpha: 0.1);
  width: 700rpx;
  height: auto;
  margin: -60rpx auto 0;
  position: relative;
  z-index: 10;
  padding-bottom: 30rpx;
  border-radius: $uni-border-radius-lg;
  overflow: hidden;
}
.set-title {
  border-bottom: 1rpx solid $uni-text-color-grey;
  padding: 20rpx 28rpx;
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  color: $color-theme;
  line-height: 48rpx;
}
.set-left {
  display: flex;
  align-items: center;
  .text {
    margin-left: 10rpx;
  }
  .icon {
    width: 30rpx;
    height: 30rpx;
  }
}
.set-right {
  font-size: 24rpx;
  .text {
    margin-right: 10rpx;
  }
}

.p-cell-group {
  background-color: $bg-theme;
  box-shadow: 0 4rpx 20rpx rgba($color: #000000, $alpha: 0.1);
  width: 700rpx;
  margin: 20rpx auto 34rpx;
  position: relative;
  z-index: 10;
  padding: 10rpx 0 20rpx;
  border-radius: $uni-border-radius-lg;
}
.p-cell {
  padding: 10rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    font-size: 28rpx;
    color: #999;
    line-height: 46rpx;
    width: 150rpx;
  }
  .p-cell-right {
    width: calc(100% - 150rpx);
    display: flex;
    align-items: center;
    text-align: right;
    justify-content: flex-end;
    color: $color-theme;
    .pr-text {
      margin: 0 10rpx;
    }
    .small {
      font-size: 24rpx;
      color: #999;
    }
    .imageicon {
      width: 42rpx;
      height: 42rpx;
    }
  }
}
.copy-box {
  width: 32rpx;
  height: 32rpx;
  display: inline-block;
  margin-left: 10rpx;
  opacity: .6;
  .icon {
    width: 100%;
    height: 100%;
  }
}
.cuinbtn-box {
  position: absolute;
  right: 0;
  top: 30rpx;
  display: flex;
  align-items: center;
  z-index: 10;
  .btnitem {
    width: 160rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
    position: relative;
    &:first-child {
      &::after {
        display: none;
      }
    }
    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 8rpx;
      width: 1rpx;
      height: 20rpx;
      background-color: rgba($color: #fff, $alpha: 0.5);
    }
  }
  .btnitem-icon {
    width: 100%;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.icon-copy-box {
  width: 32rpx;
  height: 32rpx;
  opacity: .6;
  .icon {
    width: 100%;
    height: 100%;
  }
}
.show-tips {
  padding: 0 20rpx;
  opacity: .7;
}
.ex-tipsinfo {
  background-color: $bg-theme;
  box-shadow: 0 4rpx 20rpx rgba($color: #000000, $alpha: 0.1);
  width: 700rpx;
  margin: 20rpx auto 0;
  position: relative;
  z-index: 10;
  padding: 20rpx;
  border-radius: $uni-border-radius-lg;
  .ex-strong {
    font-size: 28rpx;
    padding: 14rpx 0;
    display: block;
    color: #999;
  }
  .ex-list-item {
    font-size: 24rpx;
    color: $color-theme;
    padding-bottom: 20rpx;
    padding-left: 24rpx;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 14rpx;
      width: 10rpx;
      height: 10rpx;
      background-color: #999;
      border-radius: 50%;
    }
  }
}
.warning {
  color: #e8a22f;
}
.footer-oper {
  height: 130rpx;
}
.fot-oper-box {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 130rpx;
  background-color: $bg-theme;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14rpx 28rpx;
  box-shadow: 0 -6rpx 24rpx rgba($color: #000000, $alpha: 0.1);
  .btnoper {
    flex: 1 auto;
    padding: 0 10rpx;
    .warning {
      margin-left: 10rpx;
    }
  }
}
.payment-box {
  padding: 140rpx 30rpx;
  display: flex;
  flex-direction: column;
  .t1 {
    font-size: 32rpx;
    color: $text-color;
  }
  .t2 {
    font-size: 24rpx;
    color: #999;
    margin-top: 16rpx;
    padding-bottom: 30rpx;
  }
  .paylist-item {
    background-color: #f6f7fc;
    margin-top: 20rpx;
    padding: 10rpx;
    box-sizing: border-box;
    width: 100%;
    .payflex {
      display: flex;
      align-items: flex-start;
      width: 100%;
    }
    .p-icon {
      width: 28rpx;
      height: 28rpx;
      margin: 6rpx;
      .icon {
        width: 100%;
        height: 100%;
      }
    }
    .p-info {
      display: flex;
      flex-direction: column;
      font-size: 28rpx;
      color: $text-color;
      line-height: 42rpx;
      padding-left: 14rpx;
      width: 300rpx;
      .small {
        font-size: 24rpx;
        color: $color-theme;
      }
    }
  }
}
.vchat-image {
  width: 300rpx;
  height: 300rpx;
  margin: 20rpx auto;
  padding: 10rpx;
  border: 1rpx solid $uni-text-color-grey;
  box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.04);
  .image {
    width: 100%;
    height: 100%;
  }
}
</style>
